<template>
  <view class="search-page">
    <!-- 搜索头部 -->
    <view class="search-header">
      <view class="search-input-wrapper">
        <text class="search-icon">🔍</text>
        <input 
          class="search-input" 
          placeholder="搜索内容、标签或分类..." 
          v-model="searchKeyword"
          @input="handleSearch"
          auto-focus="true"
        />
        <text v-if="searchKeyword" class="clear-icon" @tap="clearSearch">×</text>
      </view>
      <text class="cancel-btn" @tap="cancelSearch">取消</text>
    </view>

    <!-- 搜索结果区域 -->
    <scroll-view class="search-results" scroll-y="true">
      <!-- 搜索历史 -->
      <view class="history-section" v-if="!searchKeyword && searchHistory.length > 0">
        <view class="section-header">
          <text class="section-title">搜索历史</text>
          <text class="clear-history" @tap="clearAllHistory">清空</text>
        </view>
        <view class="history-tags">
          <text class="history-tag" v-for="(item, index) in searchHistory" :key="index" @tap="searchByHistory(item)">{{ item }}</text>
        </view>
      </view>

      <!-- 热门搜索 -->
      <view class="hot-section" v-if="!searchKeyword">
        <text class="section-title">热门搜索</text>
        <view class="hot-tags">
          <text class="hot-tag" v-for="(item, index) in hotSearches" :key="index" @tap="searchByHistory(item)">
            <text class="hot-rank" :class="['rank-' + (index + 1)]">{{ index + 1 }}</text>
            {{ item }}
          </text>
        </view>
      </view>

      <!-- 搜索结果列表 -->
      <view class="results-section" v-if="searchKeyword">
        <text class="section-title">搜索结果 ({{ filteredMessages.length }})</text>
        <view class="result-list">
          <view v-for="(message, index) in filteredMessages" :key="index" class="result-item" @tap="viewDetail(message)">
            <view class="content-section">
              <text class="message-text">{{ message.content }}</text>
              <text class="message-time">{{ message.time }}</text>
            </view>
            <view class="tags-section">
              <text class="category-pill" v-if="message.category">{{ message.category }}</text>
              <text class="tag-pill" v-for="tag in message.tags" :key="tag">{{ tag }}</text>
            </view>
          </view>
        </view>
        
        <!-- 无结果提示 -->
        <view class="no-results" v-if="filteredMessages.length === 0">
          <text class="no-results-text">未找到相关内容</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'CollectionSearch',
  data() {
    return {
      searchKeyword: '',
      searchHistory: [],
      hotSearches: ['Vue3', '前端', 'uni-app', '跨平台', '学习笔记'],
      messages: [],
      filteredMessages: []
    };
  },
  onLoad() {
    // 从本地存储获取搜索历史
    const history = uni.getStorageSync('collectionSearchHistory');
    if (history) {
      this.searchHistory = JSON.parse(history);
    }
    
    // 获取收集页面的数据
    // 在实际应用中，这里应该从全局状态或API获取
    // 这里我们使用模拟数据
    this.messages = [
      { content: 'Vue3组合式API的使用技巧', time: '10:30', category: '学习笔记', tags: ['Vue3', '前端'] },
      { content: 'uni-app跨平台开发经验总结', time: '昨天', category: '技术总结', tags: ['uni-app', '跨平台', '开发'] }
    ];
  },
  methods: {
    // 处理搜索
    handleSearch() {
      const keyword = this.searchKeyword.toLowerCase().trim();
      
      if (!keyword) {
        this.filteredMessages = [];
        return;
      }
      
      this.filteredMessages = this.messages.filter(message => {
        const contentMatch = message.content.toLowerCase().includes(keyword);
        const categoryMatch = message.category && message.category.toLowerCase().includes(keyword);
        const tagMatch = message.tags.some(tag => tag.toLowerCase().includes(keyword));
        
        return contentMatch || categoryMatch || tagMatch;
      });
      
      // 添加到搜索历史
      if (keyword && !this.searchHistory.includes(keyword)) {
        this.searchHistory.unshift(keyword);
        if (this.searchHistory.length > 10) {
          this.searchHistory.pop();
        }
        // 保存到本地存储
        uni.setStorageSync('collectionSearchHistory', JSON.stringify(this.searchHistory));
      }
    },
    
    // 清空搜索
    clearSearch() {
      this.searchKeyword = '';
      this.filteredMessages = [];
    },
    
    // 取消搜索
    cancelSearch() {
      uni.navigateBack();
    },
    
    // 根据历史记录搜索
    searchByHistory(keyword) {
      this.searchKeyword = keyword;
      this.handleSearch();
    },
    
    // 清空所有历史记录
    clearAllHistory() {
      uni.showModal({
        title: '提示',
        content: '确定要清空所有搜索历史吗？',
        success: (res) => {
          if (res.confirm) {
            this.searchHistory = [];
            uni.removeStorageSync('collectionSearchHistory');
          }
        }
      });
    },
    
    // 查看详情
    viewDetail(message) {
      // 在实际应用中，这里可以跳转到详情页
      // 或者在当前页面展示更多信息
      console.log('查看消息详情:', message);
    }
  }
};
</script>

<style scoped>
/* 页面基础样式 - 优化响应式布局 */
.search-page {
  height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 搜索头部 */
.search-header {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #eeeeee;
}

.search-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 30rpx;
  padding: 15rpx 20rpx;
  margin-right: 20rpx;
}

.search-icon {
  margin-right: 10rpx;
  color: #999999;
  font-size: 28rpx;
}

.search-input {
  flex: 1;
  height: 50rpx;
  font-size: 28rpx;
  color: #333333;
}

.clear-icon {
  color: #999999;
  font-size: 32rpx;
  padding: 0 10rpx;
}

.cancel-btn {
  font-size: 30rpx;
  color: #007aff;
  padding: 0 10rpx;
}

/* 搜索结果区域 */
.search-results {
  flex: 1;
  padding: 30rpx;
  overflow-y: auto;
  /* 确保内容不会被遮挡 */
  padding-bottom: 100rpx;
  box-sizing: border-box;
  width: 100%;
}

/* 通用区域样式 */
.history-section,
.hot-section,
.results-section {
  background-color: #ffffff;
  margin-bottom: 20rpx;
  padding: 20rpx;
  box-sizing: border-box;
  width: 100%;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 28rpx;
  color: #333333;
  font-weight: 600;
}

.clear-history {
  font-size: 26rpx;
  color: #999999;
}

/* 历史搜索标签 */
.history-tags {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 100%;
}

.history-tag {
  background-color: #f5f5f5;
  border-radius: 30rpx;
  padding: 10rpx 20rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  font-size: 26rpx;
  color: #666666;
  box-sizing: border-box;
}

/* 热门搜索标签 */
.hot-tags {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
}

.hot-tag {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  font-size: 26rpx;
  color: #666666;
  border-bottom: 1rpx solid #f0f0f0;
  box-sizing: border-box;
  width: 100%;
}

.hot-tag:last-child {
  border-bottom: none;
}

.hot-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
  font-size: 24rpx;
  font-weight: 600;
  color: #ffffff;
  border-radius: 8rpx;
}

.rank-1 {
  background-color: #ff4757;
}

.rank-2 {
  background-color: #ff6348;
}

.rank-3 {
  background-color: #ff7675;
}

.rank-4,
.rank-5 {
  background-color: #747d8c;
}

/* 搜索结果列表 */
.result-list {
  margin-top: 20rpx;
  box-sizing: border-box;
  width: 100%;
}

.result-item {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  box-sizing: border-box;
  width: 100%;
}

.result-item:last-child {
  border-bottom: none;
}

.content-section {
  margin-bottom: 15rpx;
  box-sizing: border-box;
  width: 100%;
}

.message-text {
  display: block;
  font-size: 32rpx;
  color: #333333;
  margin-bottom: 10rpx;
  line-height: 48rpx;
}

.message-time {
  font-size: 24rpx;
  color: #999999;
}

.tags-section {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  box-sizing: border-box;
  width: 100%;
}

.category-pill,
.tag-pill {
  background-color: #e3f2fd;
  color: #1976d2;
  padding: 8rpx 16rpx;
  border-radius: 16rpx;
  font-size: 24rpx;
}

.category-pill {
  background-color: #e8f5e9;
  color: #388e3c;
}

/* 无结果提示 */
.no-results {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300rpx;
  flex-direction: column;
}

.no-results-text {
  font-size: 28rpx;
  color: #999999;
  margin-top: 20rpx;
}
</style>